import {NavBar, DatePicker, Toast} from "antd-mobile";
import "./index.scss"
import {useCallback, useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux"
import _ from 'lodash'
import DayBill from './components/DayBill/index'
import Not from './components/Not/index'

const Month = () => {
    // 控制时间弹窗显示的状态数据
    const [visible, setVisible] = useState(false)
    // 自定义弹窗列表数据
    const labelRenderer = useCallback((type: string, data: number) => {
        switch (type) {
            case 'year':
                return data + '年'
            case 'month':
                return data + '月'
            default:
                return data
        }
    }, [])
    // 控制时间显示
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs(new Date()).format("YYYY年MM月")
    })

    // 账单列表当前渲染数据
    const [Monthlist, setMonthList] = useState([])
    // 点击确认之后触发的逻辑
    const onSubmit = (date) => {
        setVisible(false)
        const SelectDate = dayjs(date).format("YYYY年MM月")
        setCurrentDate(SelectDate)
        Toast.show("切换成功")
        setMonthList(_.orderBy(MonthGroup[SelectDate], "date", "asc"))
    }
    // 拿到账单列表数据 按月进行分组
    const {billList} = useSelector((state) => state.bill)
    const MonthGroup = useMemo(() => {
        return _.groupBy(billList, (item) => dayjs(item.date).format("YYYY年MM月"))
    }, [billList])

    // 实时页面渲染
    useEffect(() => {
        setMonthList(_.orderBy(MonthGroup[currentDate], "date", "asc"))
    }, [MonthGroup])

    // 计算月度收支
    // 收入 / 支出 / 结余
    const MonthResult = useMemo(() => {
        let pay, income;
        if (Monthlist) {
            pay = Monthlist.filter(item => item.type === "pay").reduce((a, c) => a + c.money, 0)
            income = Monthlist.filter(item => item.type === "income").reduce((a, c) => a + c.money, 0)
        } else {
            pay = 0;
            income = 0;
        }

        return {
            pay,
            income,
            result: income + pay
        }
    }, [Monthlist])

    // 当前月按照日进行分组
    const DayGroup = useMemo(() => {
        const groupDate = _.groupBy(Monthlist, (item) => dayjs(item.date).format("YYYY年MM月DD日"))
        const keys = Object.keys(groupDate)
        return {
            groupDate,
            keys
        }
    }, [Monthlist])
    return (
        <div className={"monthlyBill"}>
            <NavBar className={"nav"} backArrow={false}>
                月度收支
            </NavBar>
            <div className={"content"}>
                <div className={"header"}>
                    {/*时间切换区域*/}
                    <div className={"date"} onClick={() => setVisible(true)}>
                        <span className={"text"}>
                            {currentDate + "账单"}
                        </span>
                        {/*箭头 根据当前弹框的状态控制箭头方向*/}
                        <span className={classNames('arrow', visible && 'expand')}></span>
                    </div>
                    {/*统计区域*/}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{MonthResult.pay}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{MonthResult.income}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{MonthResult.result}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/*时间选择器*/}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        max={new Date()}
                        visible={visible}
                        onClose={() => setVisible(false)}
                        onCancel={() => setVisible(false)}
                        onConfirm={onSubmit}
                        renderLabel={labelRenderer}
                    />
                </div>
                {/* 单日列表统计 */}
                {
                    DayGroup.keys.map(key => {
                        return <DayBill key={key} date={key} daylist={DayGroup.groupDate[key]}/>
                    })
                }

            </div>
        </div>)
}
export default Month